<script setup>
import { ref, reactive, onUpdated, watch, computed, getCurrentInstance, defineEmits, onMounted } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()

// 标签页
// const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event)
}
// 标签页内容获取
let city = ref()
let cityArr1 = ref()
let cityArr2 = ref()
let cityArr3 = ref()
let cityArr4 = ref()
let cityArr5 = ref()
let freeclose = ref()
onMounted(async () => {
    let res1 = await proxy.$axios('/city')
    city.value = res1.data.city
    cityArr1.value = [city.value[0].area1, city.value[0].area2, city.value[0].area3, city.value[0].area4, city.value[0].area5]
    cityArr2.value = [city.value[1].area1, city.value[1].area2, city.value[1].area3, city.value[1].area4, city.value[1].area5]
    cityArr3.value = [city.value[2].area1, city.value[2].area2, city.value[2].area3, city.value[2].area4, city.value[2].area5]
    cityArr4.value = [city.value[3].area1, city.value[3].area2, city.value[3].area3, city.value[3].area4, city.value[3].area5]
    cityArr5.value = [city.value[4].area1, city.value[4].area2, city.value[4].area3, city.value[4].area4, city.value[4].area5]
    // console.log(city.value[0],2222222);
    // console.log(cityArr,33333);
    emit("freeclose", freeclose.value)
})

// 地图开关
const value1 = ref(true)
const value2 = ref(true)

// 计数器
// 人数
const num1 = ref(0)
const num2 = ref(0)
const num3 = ref(0)
// 床、卧室、卫生间
const num4 = ref(0)
const num5 = ref(0)
const num6 = ref(0)

// 价格输入框
const input1 = ref()
const input2 = ref()

// 模态弹窗
let dimflag = ref(false)

// 人数按钮
let clickstyle = reactive({
    // marginRight: '12px',
    backgroundColor: 'rgb(0,132,137)',
    color: '#fff'
})
let normalstyle = reactive({
    // marginRight: '12px',
    // backgroundColor: '#fff',
    color: '#000'
})
let btnstyle1 = ref(normalstyle)
let flag1 = ref(true) // 控制样式
let flagnum = ref(false) // 控制弹窗
let click1 = () => {
    flagnum.value = !flagnum.value
    flag1.value = !flag1.value
    if (!flag1.value) btnstyle1.value = clickstyle
    else btnstyle1.value = normalstyle
    // 开启模态弹窗
    dimflag.value = true

    // 如果其他弹窗开启 关闭其他弹窗
    if (flagfre.value == true) {
        flagfre.value = !flagfre.value
        flag2.value = !flag2.value
        btnstyle2.value = normalstyle
    }
    if (flagtype.value == true) {
        flagtype.value = !flagtype.value
        flag3.value = !flag3.value
        btnstyle3.value = normalstyle
    }
    if (flagprice.value == true) {
        flagprice.value = !flagprice.value
        flag4.value = !flag4.value
        btnstyle4.value = normalstyle
    }
    if (flagbed.value == true) {
        flagbed.value = !flagbed.value
        flag6.value = !flag6.value
        btnstyle6.value = normalstyle
    }
    if (flagdis.value == true) {
        flagdis.value = !flagdis.value
        flag7.value = !flag7.value
        btnstyle7.value = normalstyle
    }
    if (flagplace.value == true) {
        flagplace.value = !flagplace.value
        flag5.value = !flag5.value
        btnstyle5.value = normalstyle
    }
}
// 关闭窗口
let closebtn = () => {
    flagnum.value = !flagnum.value
    // 按钮变色
    flag1.value = !flag1.value
    if (!flag1.value) btnstyle1.value = clickstyle
    else btnstyle1.value = normalstyle

    // 关闭模态弹窗
    dimflag.value = false
}


// 免费取消按钮
let btnstyle2 = ref(normalstyle)
let flagfre = ref(false)// 控制弹窗
let flag2 = ref(true)// 控制样式
let click2 = () => {
    flag2.value = !flag2.value
    flagfre.value = !flagfre.value
    if (!flag2.value) btnstyle2.value = clickstyle
    else btnstyle2.value = normalstyle

    // 开启模态弹窗
    dimflag.value = true
    // 如果其他弹窗开启 关闭其他弹窗
    if (flagnum.value == true) {
        flagnum.value = !flagnum.value
        flag1.value = !flag1.value
        btnstyle1.value = normalstyle
    }
    if (flagtype.value == true) {
        flagtype.value = !flagtype.value
        flag3.value = !flag3.value
        btnstyle3.value = normalstyle
    }
    if (flagprice.value == true) {
        flagprice.value = !flagprice.value
        flag4.value = !flag4.value
        btnstyle4.value = normalstyle
    }
    if (flagbed.value == true) {
        flagbed.value = !flagbed.value
        flag6.value = !flag6.value
        btnstyle6.value = normalstyle
    }
    if (flagdis.value == true) {
        flagdis.value = !flagdis.value
        flag7.value = !flag7.value
        btnstyle7.value = normalstyle
    }
    if (flagplace.value == true) {
        flagplace.value = !flagplace.value
        flag5.value = !flag5.value
        btnstyle5.value = normalstyle
    }
}
// 关闭窗口
let freclosebtn = () => {
    flagfre.value = !flagfre.value
    // 按钮变色
    flag2.value = !flag2.value
    if (!flag2.value) btnstyle2.value = clickstyle
    else btnstyle2.value = normalstyle

    // 关闭模态弹窗
    dimflag.value = false
}

// 房源类型按钮
let btnstyle3 = ref(normalstyle)
let flagtype = ref(false) // 控制弹窗
let flag3 = ref(true) // 控制按钮
let click3 = () => {
    flag3.value = !flag3.value
    flagtype.value = !flagtype.value
    if (!flag3.value) btnstyle3.value = clickstyle
    else btnstyle3.value = normalstyle

    // 开启模态弹窗
    dimflag.value = true

    // 如果其他弹窗开启 关闭其他弹窗
    if (flagnum.value == true) {
        flagnum.value = !flagnum.value
        flag1.value = !flag1.value
        btnstyle1.value = normalstyle
    }
    if (flagfre.value == true) {
        flagfre.value = !flagfre.value
        flag2.value = !flag2.value
        btnstyle2.value = normalstyle
    }
    if (flagprice.value == true) {
        flagprice.value = !flagprice.value
        flag4.value = !flag4.value
        btnstyle4.value = normalstyle
    }
    if (flagbed.value == true) {
        flagbed.value = !flagbed.value
        flag6.value = !flag6.value
        btnstyle6.value = normalstyle
    }
    if (flagdis.value == true) {
        flagdis.value = !flagdis.value
        flag7.value = !flag7.value
        btnstyle7.value = normalstyle
    }
    if (flagplace.value == true) {
        flagplace.value = !flagplace.value
        flag5.value = !flag5.value
        btnstyle5.value = normalstyle
    }
}
// 关闭窗口
let typeclosebtn = () => {
    flagtype.value = !flagtype.value
    // 按钮变色
    flag3.value = !flag3.value
    if (!flag3.value) btnstyle3.value = clickstyle
    else btnstyle3.value = normalstyle

    // 关闭模态弹窗
    dimflag.value = false
}

// 价格按钮
let btnstyle4 = ref(normalstyle)
let flagprice = ref(false) // 控制弹窗
let flag4 = ref(true) // 控制按钮
let click4 = () => {
    flag4.value = !flag4.value
    flagprice.value = !flagprice.value
    if (!flag4.value) btnstyle4.value = clickstyle
    else btnstyle4.value = normalstyle

    // 开启模态弹窗
    dimflag.value = true

    // 如果其他弹窗开启 关闭其他弹窗
    if (flagnum.value == true) {
        flagnum.value = !flagnum.value
        flag1.value = !flag1.value
        btnstyle1.value = normalstyle
    }
    if (flagfre.value == true) {
        flagfre.value = !flagfre.value
        flag2.value = !flag2.value
        btnstyle2.value = normalstyle
    }
    if (flagtype.value == true) {
        flagtype.value = !flagtype.value
        flag3.value = !flag3.value
        btnstyle3.value = normalstyle
    }
    if (flagbed.value == true) {
        flagbed.value = !flagbed.value
        flag6.value = !flag6.value
        btnstyle6.value = normalstyle
    }
    if (flagdis.value == true) {
        flagdis.value = !flagdis.value
        flag7.value = !flag7.value
        btnstyle7.value = normalstyle
    }
    if (flagplace.value == true) {
        flagplace.value = !flagplace.value
        flag5.value = !flag5.value
        btnstyle5.value = normalstyle
    }
}
// 关闭窗口
let priclosebtn = () => {
    flagprice.value = !flagprice.value
    // 按钮变色
    flag4.value = !flag4.value
    if (!flag4.value) btnstyle4.value = clickstyle
    else btnstyle4.value = normalstyle

    // 关闭模态弹窗
    dimflag.value = false
}

// 位置区域按钮
let btnstyle5 = ref(normalstyle)
let flag5 = ref(true) // 控制按钮
let flagplace = ref(false) // 控制弹窗
let click5 = () => {
    flag5.value = !flag5.value
    flagplace.value = !flagplace.value
    if (!flag5.value) btnstyle5.value = clickstyle
    else btnstyle5.value = normalstyle

    // 开启模态弹窗
    dimflag.value = true

    // 如果其他弹窗开启 关闭其他弹窗
    if (flagnum.value == true) {
        flagnum.value = !flagnum.value
        flag1.value = !flag1.value
        btnstyle1.value = normalstyle
    }
    if (flagfre.value == true) {
        flagfre.value = !flagfre.value
        flag2.value = !flag2.value
        btnstyle2.value = normalstyle
    }
    if (flagtype.value == true) {
        flagtype.value = !flagtype.value
        flag3.value = !flag3.value
        btnstyle3.value = normalstyle
    }
    if (flagbed.value == true) {
        flagbed.value = !flagbed.value
        flag6.value = !flag6.value
        btnstyle6.value = normalstyle
    }
    if (flagdis.value == true) {
        flagdis.value = !flagdis.value
        flag7.value = !flag7.value
        btnstyle7.value = normalstyle
    }
    if (flagprice.value == true) {
        flagprice.value = !flagprice.value
        flag4.value = !flag4.value
        btnstyle4.value = normalstyle
    }
}
// 关闭窗口
let placeclosebtn = () => {
    flagplace.value = !flagplace.value
    // 按钮变色
    flag5.value = !flag5.value
    if (!flag5.value) btnstyle5.value = clickstyle
    else btnstyle5.value = normalstyle

    // 关闭模态弹窗
    dimflag.value = false
}


// 卧室/床数按钮
let btnstyle6 = ref(normalstyle)
let flag6 = ref(true)
let flagbed = ref(false)
let click6 = () => {
    flag6.value = !flag6.value
    flagbed.value = !flagbed.value
    if (!flag6.value) btnstyle6.value = clickstyle
    else btnstyle6.value = normalstyle

    // 开启模态弹窗
    dimflag.value = true

    // 如果其他弹窗开启 关闭其他弹窗
    if (flagnum.value == true) {
        flagnum.value = !flagnum.value
        flag1.value = !flag1.value
        btnstyle1.value = normalstyle
    }
    if (flagfre.value == true) {
        flagfre.value = !flagfre.value
        flag2.value = !flag2.value
        btnstyle2.value = normalstyle
    }
    if (flagtype.value == true) {
        flagtype.value = !flagtype.value
        flag3.value = !flag3.value
        btnstyle3.value = normalstyle
    }
    if (flagprice.value == true) {
        flagprice.value = !flagprice.value
        flag4.value = !flag4.value
        btnstyle4.value = normalstyle
    }
    if (flagdis.value == true) {
        flagdis.value = !flagdis.value
        flag7.value = !flag7.value
        btnstyle7.value = normalstyle
    }
    if (flagplace.value == true) {
        flagplace.value = !flagplace.value
        flag5.value = !flag5.value
        btnstyle5.value = normalstyle
    }
}
// 关闭窗口
let bedclosebtn = () => {
    flagbed.value = !flagbed.value
    // 按钮变色
    flag6.value = !flag6.value
    if (!flag6.value) btnstyle6.value = clickstyle
    else btnstyle6.value = normalstyle

    // 关闭模态弹窗
    dimflag.value = false
}

// 促销/优惠按钮
let btnstyle7 = ref(normalstyle)
let flag7 = ref(true) // 控制按钮
let flagdis = ref(false)
let click7 = () => {
    flag7.value = !flag7.value
    flagdis.value = !flagdis.value
    if (!flag7.value) btnstyle7.value = clickstyle
    else btnstyle7.value = normalstyle

    // 开启模态弹窗
    dimflag.value = true

    // 如果其他弹窗开启 关闭其他弹窗
    if (flagnum.value == true) {
        flagnum.value = !flagnum.value
        flag1.value = !flag1.value
        btnstyle1.value = normalstyle
    }
    if (flagfre.value == true) {
        flagfre.value = !flagfre.value
        flag2.value = !flag2.value
        btnstyle2.value = normalstyle
    }
    if (flagtype.value == true) {
        flagtype.value = !flagtype.value
        flag3.value = !flag3.value
        btnstyle3.value = normalstyle
    }
    if (flagprice.value == true) {
        flagprice.value = !flagprice.value
        flag4.value = !flag4.value
        btnstyle4.value = normalstyle
    }
    if (flagbed.value == true) {
        flagbed.value = !flagbed.value
        flag6.value = !flag6.value
        btnstyle6.value = normalstyle
    }
    if (flagplace.value == true) {
        flagplace.value = !flagplace.value
        flag5.value = !flag5.value
        btnstyle5.value = normalstyle
    }
}
// 关闭窗口
let disclose = () => {
    flagdis.value = !flagdis.value
    // 按钮变色
    flag7.value = !flag7.value
    if (!flag7.value) btnstyle7.value = clickstyle
    else btnstyle7.value = normalstyle

    // 关闭模态弹窗
    dimflag.value = false
}


// 点击模态弹窗关闭窗口
let dimclose = () => {
    dimflag.value = false
    // 人数
    if (flagnum.value == true) {
        flagnum.value = !flagnum.value
        flag1.value = !flag1.value
        btnstyle1.value = normalstyle
    }
    // 可免费取消
    if (flagfre.value == true) {
        flagfre.value = !flagfre.value
        flag2.value = !flag2.value
        btnstyle2.value = normalstyle
    }
    // 房源类型
    if (flagtype.value == true) {
        flagtype.value = !flagtype.value
        flag3.value = !flag3.value
        btnstyle3.value = normalstyle
    }
    // 价格
    if (flagprice.value == true) {
        flagprice.value = !flagprice.value
        flag4.value = !flag4.value
        btnstyle4.value = normalstyle
    }
    // 位置区域
    if (flagplace.value == true) {
        flagplace.value = !flagplace.value
        flag5.value = !flag5.value
        btnstyle5.value = normalstyle
    }
    // 卧室/床数
    if (flagbed.value == true) {
        flagbed.value = !flagbed.value
        flag6.value = !flag6.value
        btnstyle6.value = normalstyle
    }
    // 促销/优惠
    if (flagdis.value == true) {
        flagdis.value = !flagdis.value
        flag7.value = !flag7.value
        btnstyle7.value = normalstyle
    }
}

// 当没有弹窗开启时 关闭模态弹窗
onUpdated(() => {
    if (flagnum.value == false && flagfre.value == false && flagtype.value == false && flagprice.value == false && flagbed.value == false && flagdis.value == false && flagplace.value == false) {
        dimflag.value = false
    }
})

// 开关地图
let routers = useRouter()
let flag = ref(true)
let map = () => {
    if (flag.value == true) {
        flag.value = !flag.value
        routers.push('/z-house/zmy-closemap')
    } else {
        flag.value = !flag.value
        routers.push('/z-house/zmy-one')
    }
}

// 计算刷选人数结果
let emit = defineEmits()
let pepnum = computed(() => {
    return num1.value + num2.value + num3.value
})
watch(pepnum, (n, v) => {
    emit("pepnum", n)
})

// 是否免费取消筛选
let isfreebutton = () => {
    if (value1.value == true) {
        freeclose.value = 1
    } else {
        freeclose.value = 0
    }
}
watch(freeclose, () => {
    emit("freeclose", freeclose.value)
})

// 位置区域筛选
let areaName = ref('位置区域') // 筛选按钮文字
let bjArea1 = (el1) => {
    let area = emit('area', el1)
    console.log(el1, 66666);
    areaName.value = el1 // 将区域名称替换到按钮上
}

// 价格筛选
let lowpri, highpri;
let change1 = () => {
    lowpri = input1.value
    // console.log(lowpri);
    emit('lowprice', lowpri)
}
let change2 = () => {
    highpri = input2.value
    // console.log(highpri);
    emit('highprice', highpri)
}
</script>

<template>
    <div class="box">
        <!-- 按钮 -->
        <div class="btnbox">
            <div>
                <span id="peo-num">
                    <el-button @click="click1" class="btn" plain :style="btnstyle1">人数</el-button>
                </span>
                <span id="free-out">
                    <el-button @click="click2" class="btn" plain :style="btnstyle2">可免费取消</el-button>
                </span>
                <span id="house-type">
                    <el-button @click="click3" class="btn" plain :style="btnstyle3">房源类型</el-button>
                </span>
                <span id="price">
                    <el-button @click="click4" class="btn" plain :style="btnstyle4">价格</el-button>
                </span>
                <span id="place">
                    <el-button @click="click5" class="btn" plain :style="btnstyle5" v-text="areaName"></el-button>
                </span>
                <span id="bed">
                    <el-button @click="click6" class="btn" plain :style="btnstyle6">卧室/床数</el-button>
                </span>
                <span id="discount">
                    <el-button @click="click7" class="btn" plain :style="btnstyle7">促销/优惠</el-button>
                </span>
            </div>

            <div class="isshowmap-box">

                <div class="isshowmap-box" @click="map">
                    <span class="isshow-span">显示地图</span>
                    <el-switch v-model="value2" class="mt-2" style="margin-left: 24px" inline-prompt
                        :active-icon="Check" :inactive-icon="Close" size="large" />
                </div>
            </div>

            <!-- 模态弹窗 -->
            <div class="dimbox" v-show="dimflag" @click="dimclose"></div>

            <!-- 弹窗 -->
            <div class="windowbox">
                <!-- 人数筛选 -->
                <div class="num-window" v-if="flagnum">
                    <div class="peoplebox">
                        <div class="textbox adultsbox">
                            <div class="toptext">成人</div>
                            <div class="bottomtext">13岁或以上</div>
                        </div>
                        <div class="num adultsnum">
                            <el-input-number v-model="num1" class="mx-4" max="5" min="0" />
                        </div>
                    </div>

                    <div class="peoplebox">
                        <div class="textbox">
                            <div class="toptext">儿童</div>
                            <div class="bottomtext">2-12岁</div>
                        </div>
                        <div class="num">
                            <el-input-number v-model="num2" class="mx-4" max="5" min="0" />
                        </div>
                    </div>

                    <div class="peoplebox">
                        <div class="textbox babybox">
                            <div class="toptext">婴儿</div>
                            <div class="bottomtext">2岁以下</div>
                        </div>
                        <div class="num babynum">
                            <el-input-number v-model="num3" max="5" class="mx-4" min="0" />
                        </div>
                    </div>

                    <div class="closebox">
                        <div class="close cancel" @click="closebtn">取消</div>
                        <div class="close determine" @click="closebtn">确定</div>
                    </div>
                </div>

                <!-- 免费取消筛选 -->
                <div class="free-window" v-if="flagfre">
                    <div class="f-textbox">
                        <div class="f-text">
                            <div class="fre-top-text">灵活取消</div>
                            <div class="fre-bottom-text">入住 24 小时前可退还全部房费和清洁费</div>
                        </div>
                        <div class="f-switch" @click="isfreebutton">
                            <el-switch v-model="value1" class="mt-2 free-switch" style="margin-left: 24px" inline-prompt
                                :active-icon="Check" :inactive-icon="Close" size="large" />
                        </div>
                    </div>

                    <div class="f-closebox">
                        <div class="f-close f-cancel" @click="freclosebtn">取消</div>
                        <div class="f-close f-determine" @click="freclosebtn">确定</div>
                    </div>
                </div>

                <!-- 房源类型筛选 -->
                <div class="type-window" v-if="flagtype">
                    <div class="tp-checkbox">
                        <div class="checkbox">
                            <input type="checkbox" name="" id="check1" class="check" />
                            <label for="check1">
                                <div class="ty-top-text">整个房源</div>
                                <div class="ty-bottom-text">独享所有空间，无需与他人共用</div>
                            </label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" name="" id="check2" class="check" />
                            <label for="check2">
                                <div class="ty-top-text">独立房间</div>
                                <div class="ty-bottom-text">有自己的单独卧室，与他人共享其它空间</div>
                            </label>
                        </div>
                        <div class="checkbox">
                            <input type="checkbox" name="" id="check3" class="check" />
                            <label for="check3">
                                <div class="ty-top-text">合住房间</div>
                                <div class="ty-bottom-text">与他人共享卧室以及其他空间</div>
                            </label>
                        </div>
                    </div>

                    <!-- 确定与取消按钮 -->
                    <div class="tp-closebox">
                        <div class="tp-close tp-cancel" @click="typeclosebtn">取消</div>
                        <div class="tp-close tp-determine" @click="typeclosebtn">确定</div>
                    </div>
                </div>

                <!-- 价格筛选 -->
                <div class="price-window" v-if="flagprice">
                    <div class="price-text">请输入价格区间(单位 元)：</div>
                    <div class="price-input">
                        <el-input @change="change1" v-model="input1" class="w-50 m-2" size="large" placeholder="0"
                            max="5000" min="0" maxlength="4" />
                        <div>—</div>
                        <el-input @change="change2" v-model="input2" class="w-50 m-2" size="large" placeholder="5000"
                            max="5000" min="0" maxlength="4" />
                    </div>
                    <!-- 确定与取消按钮 -->
                    <div class="pri-closebox">
                        <div class="pri-close pri-cancel" @click="priclosebtn">取消</div>
                        <div class="pri-close pri-determine" @click="priclosebtn">确定</div>
                    </div>
                </div>

                <!-- 位置区域筛选 -->
                <div class="place-window" v-if="flagplace">
                    <div>
                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <!-- 北京 -->
                            <el-tab-pane :label="city[0].place" name="first">
                                <div class="areabox">
                                    <div class="area" v-for="(el,index) in cityArr1" @click="bjArea1(el)">{{el}}</div>
                                </div>
                            </el-tab-pane>
                            <!-- 上海 -->
                            <el-tab-pane :label="city[1].place" name="second">
                                <div class="areabox">
                                    <div class="area" v-for="(el,index) in cityArr2" @click="bjArea1(el)">{{el}}</div>
                                </div>
                            </el-tab-pane>
                            <!-- 成都 -->
                            <el-tab-pane :label="city[2].place" name="third">
                                <div class="areabox">
                                    <div class="area" v-for="(el,index) in cityArr3" @click="bjArea1(el)">{{el}}</div>
                                </div>
                            </el-tab-pane>
                            <!-- 重庆 -->
                            <el-tab-pane :label="city[3].place" name="fourth">
                                <div class="areabox">
                                    <div class="area" v-for="(el,index) in cityArr4" @click="bjArea1(el)">{{el}}</div>
                                </div>
                            </el-tab-pane>
                            <!-- 杭州 -->
                            <el-tab-pane :label="city[4].place" name="fifth">
                                <div class="areabox">
                                    <div class="area" v-for="(el,index) in cityArr5" @click="bjArea1(el)">{{el}}</div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <!-- 确定与取消按钮 -->
                    <div class="pla-closebox">
                        <div class="pla-close pla-cancel" @click="placeclosebtn">取消</div>
                        <div class="pla-close pla-determine" @click="placeclosebtn">确定</div>
                    </div>
                </div>

                <!-- 卧室/床数筛选 -->
                <div class="bed-window" v-if="flagbed">
                    <div class="bed-num-box">
                        <div class="bed-text">床铺数量</div>
                        <div class="bed-count">
                            <el-input-number v-model="num4" class="mx-4" max="3" min="0" />
                        </div>
                    </div>
                    <div class="bedroom-num-box">
                        <div class="bedroom-text">卧室</div>
                        <div class="bedroom-count">
                            <el-input-number v-model="num5" class="mx-4" max="3" min="0" />
                        </div>
                    </div>
                    <div class="toilet-num-box">
                        <div class="toilet-text">卫生间</div>
                        <div class="toilet-count">
                            <el-input-number v-model="num6" class="mx-4" max="3" min="0" />
                        </div>
                    </div>
                    <!-- 确定与取消按钮 -->
                    <div class="bed-closebox">
                        <div class="bed-close bed-cancel" @click="bedclosebtn">取消</div>
                        <div class="bed-close bed-determine" @click="bedclosebtn">确定</div>
                    </div>
                </div>

                <!-- 促销/优惠筛选 -->
                <div class="discount-window" v-if="flagdis">
                    <div class="newhousebox">
                        <input type="checkbox" name="" id="discount-check1" />
                        <label class="newhs-text" for="discount-check1">
                            <div>新房特惠</div>
                            <div class="textbtm">新上线房源，直接八折</div>
                        </label>
                    </div>
                    <div class="tonightbox">
                        <input type="checkbox" name="" id="discount-check2" />
                        <label class="tont-text" for="discount-check2">
                            <div>今夜特价</div>
                            <div class="textbtm">当晚入住享低至 5 折优惠</div>
                        </label>
                    </div>
                    <!-- 确定与取消按钮 -->
                    <div class="discount-closebox">
                        <div class="discount-close discount-cancel" @click="disclose">取消</div>
                        <div class="discount-close discount-determine" @click="disclose">确定</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;

    // 复选框样式
    input[type=checkbox] {
        cursor: pointer;
        position: relative;
        width: 16px;
        height: 16px;
        font-size: 14px;
    }

    input[type=checkbox]::after {
        position: absolute;
        top: 0;
        width: 16px;
        height: 16px;
        display: inline-block;
        visibility: visible;
        text-align: center;
        content: ' ';
    }

    input[type=checkbox]:checked::after {
        content: "✓";
        font-size: 10px;
        font-weight: bold;
        background-color: rgb(0, 132, 137);
        border-radius: 2px;
        color: #fff;
    }

    // 按钮样式
    .btnbox {
        width: 100%;
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: aqua;
        border-top: 1px solid rgb(209, 207, 207);
        border-bottom: 1px solid rgb(209, 207, 207);
        padding: 4px;
        position: fixed;
        z-index: 2;
        background-color: #fff;
        padding-left: 20px;

        .isshowmap-box {
            margin-right: 10px;
        }
    }

    span {
        display: inline-block;
        margin-right: 12px;
        // background-color: red;
    }

    // 样式穿透
    span:hover ::v-deep .btn {
        background-color: rgb(242, 242, 242);
    }

    .btn {
        padding: 10px;
        color: #000;
        // background-color: #fff;
        border: 1px solid rgb(209, 207, 207);
    }

    .mt-2 {
        --el-switch-on-color: #000;
        margin-right: 20px;
    }

    .isshow-span {
        margin-right: -10px;
        text-align: center;
    }

    // 模态弹窗
    .dimbox {
        background-color: rgba(255, 255, 255, .8);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 1;
        top: 46px;
    }

    // 弹窗样式
    .windowbox {
        display: flex;
        position: fixed;
        z-index: 2;
        top: 46px;
        width: 100%;

        .num-window {
            width: 390px;
            height: 260px;
            // background-color: brown;
            border: 1px solid rgb(209, 207, 207);
            border-radius: 4px;
            // margin-left: 20%;
            background-color: #fff;

            .peoplebox {
                width: 100%;
                height: 14%;
                display: flex;
                justify-content: space-around;
                margin-left: -30px;
                margin-top: 20px;

                .adultsbox {
                    margin-left: 9px;
                }

                .babybox {
                    margin-left: 3px;
                }

                .num {
                    margin-right: -50px;
                }

                .adultsnum {
                    margin-right: -40px;
                }

                .babynum {
                    margin-right: -48px;
                }
            }

            .toptext {
                font-weight: bold;
            }

            .bottomtext {
                font-size: 10px;
                color: rgb(67, 67, 67);
            }


            .closebox {
                display: flex;
                justify-content: space-between;


                .close {
                    font-weight: bold;
                    margin-top: 45px;
                    cursor: pointer;
                }

                .cancel {
                    margin-left: 28px;
                }

                .determine {
                    margin-right: 28px;
                    color: rgb(0, 132, 137);
                }
            }
        }

        .free-window {
            width: 430px;
            height: 130px;
            // background-color: brown;
            border: 1px solid rgb(209, 207, 207);
            border-radius: 4px;
            margin-left: 4%;
            padding-top: 30px;
            background-color: #fff;

            .f-textbox {
                display: flex;
                justify-content: space-between;

                .f-text {
                    margin-left: 20px;

                    .fre-top-text {
                        font-weight: bold;
                    }

                    .fre-bottom-text {
                        font-size: 14px;
                        color: rgb(67, 67, 67);
                    }
                }

                .free-switch {
                    --el-switch-on-color: rgb(0, 132, 137);
                }
            }

            .f-closebox {
                display: flex;
                justify-content: space-between;

                .f-close {
                    font-weight: bold;
                    margin-top: 45px;
                    cursor: pointer;
                }

                .f-cancel {
                    margin-left: 18px;
                }

                .f-determine {
                    margin-right: 20px;
                    color: rgb(0, 132, 137);
                }
            }

        }

        .type-window {
            width: 332px;
            height: 210px;
            // background-color: brown;
            border: 1px solid rgb(209, 207, 207);
            border-radius: 4px;
            margin-left: 11%;
            padding-top: 30px;
            background-color: #fff;

            .tp-closebox {
                display: flex;
                justify-content: space-between;

                .tp-close {
                    font-weight: bold;
                    margin-top: 16px;
                    cursor: pointer;
                }

                .tp-cancel {
                    margin-left: 18px;
                }

                .tp-determine {
                    margin-right: 20px;
                    color: rgb(0, 132, 137);
                }
            }


            .tp-checkbox {
                width: 100%;
                display: block;

                .checkbox {
                    display: flex;
                    margin-bottom: 14px;

                    .check {
                        margin-left: 24px;
                        margin-top: 4px;
                    }

                    label {
                        cursor: pointer;
                        margin-left: 10px;

                        .ty-top-text {
                            font-weight: bold;
                            font-size: 14px;
                            color: rgb(72, 72, 72);
                        }

                        .ty-bottom-text {
                            font-size: 14px;
                            color: rgb(72, 72, 72);
                        }
                    }
                }
            }
        }

        .price-window {
            width: 370px;
            height: 170px;
            border: 1px solid rgb(209, 207, 207);
            border-radius: 4px;
            margin-left: 17%;
            padding-top: 30px;
            background-color: #fff;

            .price-text {
                margin-left: 30px;
            }

            .price-input {
                // background-color: red;
                width: 300px;
                display: flex;
                align-items: center;
                margin-left: 30px;
                margin-top: 30px;

                .w-50 {
                    margin-right: 20px;
                    margin-left: 20px;
                }
            }

            .pri-closebox {
                display: flex;
                justify-content: space-between;
                margin-top: 30px;

                .pri-close {
                    font-weight: bold;
                    margin-top: 16px;
                    cursor: pointer;
                }

                .pri-cancel {
                    margin-left: 22px;
                }

                .pri-determine {
                    margin-right: 20px;
                    color: rgb(0, 132, 137);
                }
            }
        }

        .bed-window {
            width: 370px;
            height: 196px;
            border: 1px solid rgb(209, 207, 207);
            border-radius: 4px;
            margin-left: 27%;
            padding-top: 30px;
            background-color: #fff;
            font-size: 14px;
            color: rgb(72, 72, 72);

            .bed-num-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;

                .bed-text {
                    margin-left: 30px;
                }

                .bed-count {
                    margin-right: 30px;
                }
            }

            .bedroom-num-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;

                .bedroom-text {
                    margin-left: 30px;
                }

                .bedroom-count {
                    margin-right: 30px;
                }
            }

            .toilet-num-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;

                .toilet-text {
                    margin-left: 30px;
                }

                .toilet-count {
                    margin-right: 30px;
                }
            }

            // 关闭按钮
            .bed-closebox {
                display: flex;
                justify-content: space-between;
                margin-top: 30px;

                .bed-close {
                    font-weight: bold;
                    margin-top: -5px;
                    cursor: pointer;
                }

                .bed-cancel {
                    margin-left: 22px;
                }

                .bed-determine {
                    margin-right: 20px;
                    color: rgb(0, 132, 137);
                }
            }
        }

        .discount-window {
            width: 310px;
            height: 190px;
            border: 1px solid rgb(209, 207, 207);
            border-radius: 4px;
            margin-left: 33%;
            padding-top: 30px;
            background-color: #fff;
            font-size: 14px;
            font-weight: bold;
            color: rgb(72, 72, 72);
            padding-left: 30px;

            .textbtm {
                font-weight: normal;
            }

            .newhousebox {
                display: flex;
                margin-bottom: 30px;
                align-items: center;

                .newhs-text {
                    margin-left: 10px;
                    margin-top: 10px;
                    cursor: pointer;
                }
            }

            .tonightbox {
                display: flex;
                align-items: center;

                .tont-text {
                    margin-left: 10px;
                    margin-top: 10px;
                    cursor: pointer;
                }
            }

            .discount-closebox {
                display: flex;
                justify-content: space-between;
                margin-top: 30px;

                .discount-close {
                    font-weight: bold;
                    margin-top: -5px;
                    cursor: pointer;
                }

                .discount-cancel {
                    margin-left: -12px;
                }

                .discount-determine {
                    margin-right: 20px;
                    color: rgb(0, 132, 137);
                }
            }
        }

        .place-window {
            width: 310px;
            height: 230px;
            border: 1px solid rgb(209, 207, 207);
            border-radius: 4px;
            margin-left: 21%;
            padding-top: 20px;
            background-color: #fff;
            font-size: 14px;
            font-weight: bold;
            color: rgb(72, 72, 72);
            padding-left: 20px;
            padding-right: 20px;

            // 标签页
            .demo-tabs>.el-tabs__content {
                padding: 32px;
                color: #6b778c;
                font-size: 32px;
                font-weight: 600;
            }

            .areabox {
                display: flex;
                color: #000;
                font-weight: normal;
                flex-wrap: wrap;

                .area {
                    // background-color: red;
                    margin: 16px;
                    width: 70px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    cursor: pointer;
                }

                .area:hover {
                    color: rgb(0, 132, 137);
                }
            }

            .pla-closebox {
                display: flex;
                justify-content: space-between;
                margin-top: 6px;

                .pla-close {
                    font-weight: bold;
                    margin-top: 10px;
                    cursor: pointer;
                }

                .pla-cancel {
                    margin-left: 10px;
                }

                .pla-determine {
                    margin-right: 10px;
                    color: rgb(0, 132, 137);
                }
            }
        }
    }
}
</style>